<template>
	<view class="">
		<view class="bg">
			<view class="">
				{{info.status==1?'待支付':info.status==2?'待核销':info.status==3?'已核销':info.status==4?'已完成':''}}
			</view>
			<view>
				{{info.createTime}}
			</view>
		</view>

		<view class="content">
			<view class="u-margin-bottom-40" v-if="info.status==2">
			   <canvas canvas-id="qrcode" style="width: 354px;height: 354px;position: absolute;left: -500%;top:-500%" />
			   <view class=""
			   	style="border: 5rpx solid #333;padding: 10rpx;display: table;border-radius: 20rpx;margin:30rpx auto;">
			   	<image :src="baseUrl" mode="widthFix" style="width: 280rpx;height: 280rpx;" @click="previewImage">
			   	</image>
			   </view>	   
			   <view style="width: 500rpx;text-align: center;margin: auto;">
			   	<view style="font-size: 35rpx;margin-bottom: 20rpx;font-weight: bold;">核销码</view>
			   	<!-- <view style="color: #FF6D3F;margin-bottom: 20rpx">请在送水时将此码出示给师傅哦~</view> -->
			   </view>	 
			</view>
			
			
		<!-- 	
			<view class="u-margin-top-20 u-margin-bottom-40">
				<u-section title="收货地址" :right="false" color="#2D9AFE" font-size="35"></u-section>
			</view>

			<view class="shadow u-flex u-row-between u-padding-20 u-margin-bottom-20" v-if="info.expressNo">
				<view class="">
					快递单号
				</view>
				<view>
					{{info.expressNo}} <text style="color: #2D9AFE;margin-left: 20rpx;" @click="copy">复制</text>

				</view>
			</view> -->
			
            <!-- 地址 -->
	<!-- 		<view class="shadow u-padding-30 u-flex u-row-between">
				<view class="u-flex">
					<u-icon name="map-fill" color="#2D9AFE" size="40"></u-icon>

					<view style="width: 500rpx;margin-left: 20rpx;">
						<view class="u-flex">
							<view style="font-size: 32rpx;font-weight: bold;">{{info.recipient}}</view>
							<view style="color: #AEAEAE;margin-left: 40rpx;">{{info.phone}}</view>
						</view>
						<view class="">
							地址：{{info.address}}
						</view>
					</view>
				</view>
			</view> -->
			
			


			<view class="u-margin-top-40 u-margin-bottom-40">
				<u-section title="产品信息" :right="false" color="#2D9AFE" font-size="35"></u-section>
			</view>

			<view class="  u-flex " v-for="(item,index) in info.goods">
				<image :src="item.cover" style="width: 80rpx;height: 80rpx;"></image>
				<view class="u-margin-left-20">
					<view>{{item.goodsName}}</view>
					<view style="color:#FF6D3F" v-if="info.orderType==3">￥{{item.price}}</view>
					
					<view style="font-size: 26rpx;color: #007AFF;font-weight: bold;"  v-if="info.orderType==5">{{item.integral}}积分<text
							v-if="Number(item.price)>0"> +{{item.price}}元</text> </view>
				</view>
			</view>

			<view class="u-margin-top-40 shadow">
				<u-cell-group>
					
					
					<u-cell-item title="支付方式" :value="info.payWay" :arrow="false" v-if="info.payWay"></u-cell-item>
					
					<u-cell-item title="商品总价" :value="'￥'+info.totalMoney" :arrow="false"></u-cell-item>
					<u-cell-item title="运费总价" :value="'￥'+info.expressFee" :arrow="false"
						v-if="Number(info.expressFee) "></u-cell-item>
					<u-cell-item title="金额总价" :value="'￥'+info.payMoney" :arrow="false" :value-style="{fontSize:'40rpx',color:'#FF6D3F'}"></u-cell-item>
				</u-cell-group>
			</view>

			<view class="u-margin-top-40 shadow">

				<u-cell-group>
					<u-cell-item title="提交时间" :value="info.createTime" :arrow="false" v-if="info.createTime">
					</u-cell-item>
					<u-cell-item title="支付时间" :value="info.payTime" :arrow="false" v-if="info.payTime"></u-cell-item>
					<u-cell-item title="发货时间" :value="info.deliverTime" :arrow="false" v-if="info.deliverTime">
					</u-cell-item>
					<u-cell-item title="收货时间" :value="info.signTime" :arrow="false" v-if="info.signTime"></u-cell-item>
				   <u-cell-item title="订单号" :value="info.outTradeNo" :arrow="false" v-if="info.outTradeNo"></u-cell-item>
				</u-cell-group>
			</view>



		</view>

		

	<u-toast ref="uToast" />

	</view>
</template>

<script>
	

	import uQRCode from '@/common/uqrcode.js';

	
	export default {

		data() {
			return {
				info: {
				},
				id: "",
				baseUrl: "",
			}
		},
		
		async onLoad(options) {
			if (options.id) {
				this.id = options.id
				
			}
			
			await this.jiazai()
			 this.make()
		},
		methods: {
			jiazai() {
				 return new Promise((resolve, reject) => {
					 this.$u.post('/api/indent/orderDetail', {
					 	order_id: this.id
					 }, {}).then(res => {
					 	this.info = res
						resolve(res)
					 }).catch(err => {})
					 
				 })
		
			},

			copy() {
				uni.setClipboardData({
					data: this.info.expressNo,
					success: () => {
						uni.showToast({ //提示
							title: "复制成功"
						})
					}
				});
			},
			async make() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'wr?'+this.info.id,
					size: 354,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
			
				}).then(res => {
			
					this.baseUrl = res;
			
				})
			
			
			},
			previewImage() {
				uni.previewImage({
					urls: [this.baseUrl]
				})
			
			},
			// ok(){
			// 	this.$u.post('/api/indent/signFor', {
			// 		order_id: this.id
			// 	}, {}).then(res => {
				
			// 		this.$refs.uToast.show({
			// 			title:"收货成功",
			// 			type: 'success',
			// 			back :true				
			// 		})
					
			// 	}).catch(err => {})
				
			
			// }
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		background: #3464D6;
		padding: 30rpx 30rpx 150rpx 30rpx;
		display: flex;
		color: #FFFFFF;
		justify-content: space-between;
	}

	.content {
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		bottom: 100rpx;
		padding: 40rpx;
		min-height: 500rpx;

	}

	.bottomFix {
		background: #FF6D3F;
		color: #fff;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		z-index: 999;
	}
</style>
  